<!DOCTYPE html>
<html>
<head>
	<!-- Script includes section -->
	<script src='http://code.jquery.com/jquery-1.8.2.min.js' type='text/javascript' charset='utf-8'></script>
	<script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script src="http://platform.twitter.com/widgets.js"></script>

	<!--CSS-->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" type="text/css" />
	<link rel='stylesheet' href='stylesheets/application.css' type='text/css' media='screen'>

	<!--Favicon-->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="icon" type="image/gif" href="animated_favicon1.gif">

	<title>@ttendid</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="@ttendid">
	<meta name="author" content="Ryley Herrington">
</head>

<body>

<!---------------------------------------
Post to twitter page  
------------------------------------------>
<div data-role="page" id="post">
	<div data-role="content" id="post-content">
	<input id="tweet_msg" name="tweet_msg" type='text' value='Tweet' onchange="changeTweet()"/>

	<a  href="http://twitter.com/share"
   		class="twitter-share-button"
   		id="twitter_href"
   		data-text=""
   		data-count="none" 
   		data-via="ttendid">Tweet </a>

<script>
	function changeTweet){
		$('twitter_href[data-text]').attr('data-text', document.getElementById('tweet_msg').value);
	}

	$(document).ready(function(){
   		 $('twitter_href[data-text]').each(function(){
   		   $(this).attr('data-text', document.getElementById('tweet_msg').value);
   		 });
	});

</script>

<!--
		<a href="http://twitter.com/intent/tweet?text=%20via+%40ttendid&hashtags=attendid"
			class="twitter-button" 
			data-size="large" 
			data-related="ttendid">Tweet what you @ttendid</a>
		<script>
			!function(d,s,id){
				var js,fjs=d.getElementsByTagName(s)[0];
				if(!d.getElementById(id)){
					js=d.createElement(s);
					js.id=id;
					js.src="//platform.twitter.com/widgets.js";
					fjs.parentNode.insertBefore(js,fjs);
				}
			}
			(document,"script","twitter-wjs");
		</script>
-->

	</div><!--end of the content-->
	

	<div data-role="footer" data-position="fixed" data-theme="b" data-id="toolbar">
		<div data-role="navbar">
			<ul>
				<li><a class="ui-button-active" href="#post" data-icon="plus" data-transition="slide">Post</a></li>
				<li><a href="#home" data-icon="home" data-transition="slide">Pics</a></li>
				<li><a href="#twitter" data-icon="info" data-transition="slide">Feed</a></li>
				<li><a href="contact.php" data-icon="dialog" data-transition="slide">Feedback</a></li>
			</ul>
		</div>
	</div>

</div>

<!---------------------------------------
Pics from Instagram 
-------------------------------------->
<div data-role="page" id="home">
	<div data-role="content" id="home-content">
	  <fieldset class="ui-grid-a">
		<form id='search'>
			<div class="ui-block-a">
			<input class='search-tag' id="i_query" type='text' tabindex='1' value='portland' /></div>
			<div class="ui-block-b"><button class="button" data-theme='b' 
				data-mini="true" data-icon="search" type="submit" id="search-button" 
				dir="ltr" tabindex="2">Search</button></div>
		</form>
	  </fieldset>	
		<div id='photos-wrap'>
		</div>
	
		<div class='paginate'>
			<a class='button'	style='display:none;' data-max-tag-id='' href='#'>View More...</a>
		</div>
	</div>

	<div data-role="footer" data-position="fixed" data-theme="b" data-id="toolbar">
		<div data-role="navbar">
			<ul>
				<li><a href="#post" data-icon="plus" data-transition="slide">Post</a></li>
				<li><a class="ui-button-active" href="#home" data-icon="home" data-transition="slide">Pics</a></li>
				<li><a href="#twitter" data-icon="info" data-transition="slide">Feed</a></li>
				<li><a href="contact.php" data-icon="dialog" data-transition="slide">Feedback</a></li>
			</ul>
		</div>
	</div>

</div>

<!------------------------------------------
Twitter 
------------------------------------------>
<div data-role="page" id="twitter">
	<div data-role="content" data-theme='b' id="twitter-content">
		<!--This should be in a header-->
		<fieldset class="ui-grid-a">
		  <form id="search">
			<div class="ui-block-a">
			<input type="text" data-inline="true" data-mini="true" 
				name="search" id="t_query" value="Portland" /> 
			</div>
			<div class="ui-block-b">
				<button type="submit" id="submit" data-mini="true" data-theme="b">Search</button></div>	   
		  </form>
		</fieldset>

		<br/> <!--to account for the search bar in the beginning page-->
		<br/>

		<div id="tweets" style="padding: 2px;"> </div><!--see javascripts/application.js for this-->
	</div><!--end data-role content-->

	<div data-role="footer" data-position="fixed" data-theme="b" data-id="toolbar">
		<div data-role="navbar">
			<ul>
				<li><a href="#post" data-icon="plus" data-transition="slide">Post</a></li>
				<li><a href="#home" data-icon="home" data-transition="slide">Pics</a></li>
				<li><a class="ui-button-active"	href="#twitter" data-icon="info" data-transition="slide">Feed</a></li>
				<li><a href="contact.php" data-icon="dialog" data-transition="slide">Feedback</a></li>
			</ul>
		</div>
	</div>
</div>

<!----------------------------------------
Feedback 
----------------------------------------->
<div data-role="page" id="feedback">
	<div data-role="content" id="feedback-content">

	<div data-role="footer" data-position="fixed" data-theme="b" data-id="toolbar">
		<div data-role="navbar">
			<ul>
				<li><a href="#post" data-icon="plus" data-transition="slide">Post</a></li>
				<li><a href="#home" data-icon="home" data-transition="slide">Pics</a></li>
				<li><a href="#twitter" data-icon="info" data-transition="slide">Feed</a></li>
				<li><a class="ui-button-active"	href="contact.php" data-icon="dialog" data-transition="slide">Feedback</a></li>
			</ul>
		</div>
	</div>
</div>

</body>
</html>



